<template>
  <div class="detailcomment b_margin">
    <van-cell is-link @click.native="comments">
      <span class="pinglun_length">买家评论:{{pinglunLength}}</span>
      <span>销量:{{xiaoliang}}</span>
      <div class="comment_categroy" v-if="datas">
        <span
          v-for="item in datas.pinglun_categroy"
          :key="item.id"
        >{{item.title}}({{pinglunCategroyLength(item.pingluncate_id)}})</span>
      </div>
    </van-cell>
  </div>
</template>

<script>
export default {
  name: "DetailComment",
  props: {
    datas: {
      type: Object
    }
  },
  computed: {
    goodId() {
      return this.$route.params.good_id;
    },
    pinglunLength() {
      if (this.datas && this.datas.pinglun) {
        return this.datas.pinglun.length;
      }
    },
    xiaoliang() {
      if (this.datas&&this.datas.color && this.datas.color.length) {
        return this.datas.color.reduce((preValue, n) => {
          return preValue + n.xiaoliang;
        }, 0);
      } else if (this.datas&&this.datas.guige && this.datas.guige.length) {
        return this.datas.guige.reduce((preValue, n) => {
          return preValue + n.xiaoliang;
        }, 0);
      }
    },
    pinglunCategroyLength(categroy_id) {
      return categroy_id => {
        return this.datas.pinglun.filter((item, index) => {
          return item.pinglun_categroy_id == categroy_id;
        }).length;
      };
    }
  },
  methods: {
    comments() {
      this.$router.push(`/comment/${this.goodId}`);
    }
  },
  created() {
    
  }
};
</script>

<style lang="less" scoped>
.detailcomment {
  .van-cell {
    padding: 10px;
    .pinglun_length {
      margin-right: 10px;
    }
    .comment_categroy {
      padding: 5px;
      span {
        float: left;
        margin-right: 10px;
        margin-bottom: 5px;
        padding: 0 5px;
        background-color: coral;
        color: #fff;
      }
    }
  }
}
</style>